<template>
  <div class="inOutCommoditiesCon">
  <div class="inOutCommoditiesConImg">
        <div class="img-wrap" v-for="(item,i) in impproductlist" :key="i"  v-if="curIndex == i">
          <div class="img-box">

                <img  :src="pinLieImgSrcs[i]"  />
                 <span>{{item.CLASS}}</span>
          </div >
          <div  class="danliang" >
            <span class="shulineleft"></span>
              <span class="numw">
                <i class="num">{{formatNumberRgx(item.DANLIANG)}}</i>包
              </span>
              <span class="text">业务单量</span>
              <span class="shulineright"></span>
          </div >
        </div>
    </div>

       <!-- <div class="inOutCommoditiesConImg">
           <div class="inOutCommodities" :class="curIndex==i?'active':''" v-for="(item,i) in impproductlist" :key="i">
              <img class="inOutCommoditiesImg" v-if="curIndex === i" :src="imgsrcAc"  />
              <img class="inOutCommoditiesImg" v-else :src="imgsrc"  />
              <div class="inOutCommoditiesTxt">
                <span>{{i+1}}</span>
                <span>{{formatNumberRgx2(item.CLASS)}}</span>
              </div>
             <div class="inOutCommoditiesTip" :class="curIndex==i?'show':''">
                  <div>单量:<span>{{formatNumberRgx(item.DANLIANG)}}</span></div>
                </div>
            </div>
        </div> -->

    <commoditySales :impProductData = 'curImpDetail' :className='curClass'  :sy='sy' style="width: 100%;height:60%;"></commoditySales>


  </div>

</template>

<script>

  import commoditySales from '@/views/bigScreen/secTelement/commoditySales'
	export default {
		name: 'outCommodities',
		components: {
         commoditySales
		},
		data() {
			return {
          impproductlist:{},//出口大类
          // imgsrc:require('../../../../static/img/kind_show.png'),
          // imgsrcAc:require('../../../../static/img/kind_show_selected.png'),
          pinLieImgSrcs:[require('../../../../static/img/shangpinfenlei/fuzhuang.png'),
          require('../../../../static/img/shangpinfenlei/xiemao.png'),
          require('../../../../static/img/shangpinfenlei/shipin.png'),
          require('../../../../static/img/shangpinfenlei/wanju.png'),
          require('../../../../static/img/shangpinfenlei/jixieqiju.png'),
          require('../../../../static/img/shangpinfenlei/jiatingyongpin.png'),
          require('../../../../static/img/shangpinfenlei/shougonggongju.png'),
          require('../../../../static/img/shangpinfenlei/qichepeijian.png')],
          curIndex:0,
          impProductData:{},
          curClass:'',
          imgDetail:[],
          curImpDetail:[],
          sy:''
			}
		},
		mounted() {

      this.getEchartData()
       let _this = this;
      setInterval(() => {
        if( _this.curIndex<_this.impproductlist.length-1){
          _this.curIndex+=1;
        }else{
          _this.curIndex = 0
        }

        _this.sy = (_this.curIndex+1)%2;
        _this.sy = _this.sy.toString();
       _this.curClass = _this.impproductlist[_this.curIndex].CLASS;
       _this.curImpDetail = _this.imgDetail[ _this.curClass];
      }, 15000);
		},
		methods: {
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
        formatNumberRgx2(num) {
        var part = num.substring(0,2);
        if(part == '其他'){
          part = '家用品';
        }else if(part == '鞋、'){
          part = '鞋、帽';
        }
        return part;
      },
			getEchartData() {
        const inOutCommodities = this.$refs.inOutCommodities;
        //进出口商品大类
       var _this = this;
        /*申报/通关*/
         this.$myHttp.post("getGoodClassInfo")
        	.then(function(data0) {
        	  		if(data0.status == "200") {
             var impClasses=[];
            	if(data0.data.hn_productclass&&data0.data.hn_productclass.exp){ //出口数据

                data0.data.hn_productclass.exp.forEach((item,index)=>{

                })

              _this.impproductlist = data0.data.hn_productclass.exp;
              _this.imgDetail = data0.data.hn_productclass.expDetail;
              _this.curClass = data0.data.hn_productclass.exp[0].CLASS;
              _this.sy = '1';
            //  _this.curImpDetail = data0.data.hn_productclass.imgDetail[ _this.curClass]

               _this.curImpDetail = data0.data.hn_productclass.expDetail[_this.curClass]
            	}
            }

           })
				if(inOutCommodities) {
					const myChart = this.$echarts.init(inOutCommodities)

					const option = {};
					myChart.setOption(option)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
			},

		}
	}
</script>

<style scoped>
  .img-wrap{
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-around;
   }
   .img-box{
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
   }
   .img-box>span{
     color:#fdd000 ;
     font-size: .14rem;
     margin-top: 3px;
   }
   .danliang{
     padding: .2rem;
     border: 1px solid #267bb5;
    position: relative;
   }
   .danliang>span{
     display:block;
   }
 .danliang>.shulineleft{
    position: absolute;
    width: 1px;
    height: .6rem;
    left: -1px;
    top: 0;
   bottom: 0;
   margin: auto 0;
   background:#012d60db ;
  }
  .danliang>.shulineright{
     position: absolute;
    width: 1px;
    height: .6rem;
    right: -1px;
    top: 0;
   bottom: 0;
   margin: auto 0;
   background:#012d60db ;
  }

   .danliang .numw{
    font-weight: .12rem;
     background-image:-webkit-linear-gradient(bottom,#47f7f4,#fdff2f);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
   }
    .danliang .numw .num{
       font-size:.2rem;
       font-weight: bold;
    }
    .danliang .text{
      text-align: center;
      font-size:.1rem;
      padding-top:.1rem;
      color:#fff;
    }
   .inOutCommoditiesAndComSalesTit {
     width: 100%;
     height: 12%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     z-index: 2;
   }

   .inOutCommoditiesAndComSalesTit>span {
     padding: 0 .1rem;
     font-size: .16rem;
     color: #ffffff;
     cursor: pointer;
   }

   .inOutCommoditiesAndComSalesTit>span.active {
     color: #fdd000;
   }
  	.inOutCommoditiesCon{
     width: 98%;
     padding:0 1%;
     height: 100%;
   }
   .inOutCommoditiesConImg{
     width: 100%;
     height: 40%;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
   }
   .inOutCommodities{
     width:25% ;
     height: 40%;
     position: relative;
     margin-bottom:5%;
     display: flex;
     align-items: center;
     justify-content: center;
   }
    .inOutCommodities img{

    }
   .inOutCommoditiesTxt{
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     color: #fff;
     flex-direction: column;
   }
   .inOutCommoditiesTxt>span:nth-of-type(1){
     font-size: .12rem;
     line-height:.4rem;
     margin-top: -.1rem;
   }
   .inOutCommoditiesTxt>span:nth-of-type(2){
     font-size: .12rem;
     /* white-space: nowrap;*/
     overflow: hidden;
     /* text-overflow: ellipsis; */
     width: 100%;
     text-align: center;
   }
   .inOutCommoditiesImg{
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     margin: auto;
     width: .62rem;
     height: .62rem;
   }
   .inOutCommoditiesTip{
     width: 100%;
     line-height: .28rem;
     max-height:.56rem;
     position: absolute;
     right:0;
     bottom:  -.22rem;
     margin: 0 auto;
     display:none;
     word-wrap:break-word;
     background: url(../../../../static/img/hover_bg.png);
     background-size: 100% 100%;
   }
   .inOutCommoditiesTip>div{

     color: #fff;
     font-size: .12rem;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .inOutCommoditiesTip>img{
     width: 100%;
     height: 100%;
   }
   .inOutCommoditiesTip>div>span{
     color: #5efffb;
     font-size: .12rem;
   }
  .show{
     display:block;
  }

</style>
